<template>
  <!-- 检查事项 -->
  <div class="dialog-container">
    <el-dialog
      :title="dialogType==='add'?'监测因子库':dialogType === 'detail'?'因子库详情':'修改因子库'"
      :visible="dialogVisible"
      width="60%"
      @open="initData"
      @close="closeDialog"
    >
      <el-form
        ref="form"
        :model="dataForm"
        class="dialog-form"
        :rules="rules"
        label-width="120px"
        size="mini"
        :disabled="dialogType === 'detail'"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="监测因子类型" prop="factorType">
              <el-select
                v-model="dataForm.factorType"
                class="w-100"
                placeholder="请选择类型"
              >
                <el-option
                  v-for="(item,index) in factorTypes"
                  :key="index+'task_type'"
                  :value="item.code"
                  :label="item.codeName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="因子代码" prop="num">-->
          <!--              <el-input v-model="dataForm.num" placeholder="" />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="12">
            <el-form-item label="监测因子名称" prop="name">
              <el-input v-model="dataForm.name" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小数位数" prop="digit">
              <el-select
                v-model="dataForm.digit"
                class="w-100"
                placeholder=""
              >
                <el-option
                  v-for="(item,index) in digits"
                  :key="index+'digits'"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计量单位" prop="measurementUnit">
              <el-select
                v-model="dataForm.measurementUnit"
                class="w-100"
                placeholder=""
              >
                <el-option
                  v-for="(item,index) in units"
                  :key="index+'units'"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计量单位倍率" prop="measurementUnitRate">
              <el-select
                v-model="dataForm.measurementUnitRate"
                class="w-100"
                placeholder=""
              >
                <el-option
                  v-for="(item,index) in rates"
                  :key="index+'rates'"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="累计单位" prop="countUnit">
              <el-select
                v-model="dataForm.countUnit"
                class="w-100"
                placeholder=""
                filterable
                clearable
              >
                <el-option
                  v-for="(item,index) in units"
                  :key="index+'task_type'"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="累计单位倍率" prop="countUnitRate">
              <el-select
                v-model="dataForm.countUnitRate"
                class="w-100"
                placeholder=""
                filterable
                clearable
              >
                <el-option
                  v-for="(item,index) in rates"
                  :key="index+'task_type'"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报警默认下限值" prop="lowerAlarmLimit">
              <el-input v-model="dataForm.lowerAlarmLimit" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报警默认上限值" prop="upperAlarmLimit">
              <el-input v-model="dataForm.upperAlarmLimit" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <div
            v-for="(item, index) in dataForm.codingProtocolList"
            :key="item.key"
          >
            <el-col :span="10">
              <el-form-item
                :key="index + '_protocol'"
                label="协议"
                :prop="'codingProtocolList.' + index + '.protocol'"
                :rules="{
                  required: true, message: '协议不能为空', trigger: 'change'
                }"
              >
                <el-select
                  v-model="item.protocol"
                  class="w-100"
                  placeholder=""
                >
                  <el-option
                    v-for="(coding, ide) in codingProtocols"
                    :key="ide+'coding_protocol'"
                    :value="coding.code"
                    :label="coding.codeName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item
                :key="index + '_num'"
                label="编码"
                :prop="'codingProtocolList.' + index + '.num'"
                :rules="{
                  required: true, message: '编码不能为空', trigger: 'blur'
                }"
              >
                <el-input v-model="item.num" placeholder="" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button size="mini" type="primary" @click="tableAdd">添加</el-button>
              <el-button size="mini" type="primary" @click="tableDel(item)">删除</el-button>
            </el-col>
          </div>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="saveLoading" class="sure-btn" size="mini" type="primary" @click="handleSave">保存</el-button>
        <el-button size="mini" class="cancel-btn" @click="closeDialog">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { add, edit } from '@/api/system/factorLibrary'
import { getDictLabel } from '@/utils'
import { getDict } from '@/utils/dict'

export default {
  name: 'AddFactorLibrary',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogType: {
      type: String,
      default: 'detail'
    },
    obj: {
      type: Object,
      default: null
    },
    units: {
      type: Array,
      default: null
    },
    rates: {
      type: Array,
      default: null
    },
    digits: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      saveLoading: false,
      dataForm: {
        codingProtocolId: '',
        factorType: '',
        num: '',
        name: '',
        digit: '',
        measurementUnit: '',
        measurementUnitRate: '',
        countUnit: '',
        countUnitRate: '',
        lowerAlarmLimit: '',
        upperAlarmLimit: '',
        codingProtocolList: [{
          protocol: null,
          num: null
        }]
      },
      // 因子库类型
      factorTypes: [],
      // 协议
      codingProtocols: [],
      allInfo: [],
      rules: {
        factorType: [{ required: true, message: '请选择类型', trigger: 'change' }],
        name: [{ required: true, message: '请输入因子名称', trigger: 'blur' }],
        digit: [{ required: true, message: '请选择小数位数', trigger: 'change' }],
        measurementUnit: [{ required: true, message: '请选择计量单位', trigger: 'change' }],
        measurementUnitRate: [{ required: true, message: '请选择计量单位倍率', trigger: 'change' }],
        countUnit: [{ required: true, message: '请选择累计单位', trigger: 'change' }],
        countUnitRate: [{ required: true, message: '请选择累计单位倍率', trigger: 'change' }],
        lowerAlarmLimit: [{ required: true, message: '请输入下限值', trigger: 'blur' }],
        upperAlarmLimit: [{ required: true, message: '请输入上限值', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.factorTypes = getDict('e012')
    this.codingProtocols = getDict('e049')
  },
  methods: {
    getDictLabel,
    initData() {
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      if (this.dialogType === 'update') {
        this.dataForm = JSON.parse(JSON.stringify(this.obj))
      }
    },
    handleSave() {
      this.$refs['form'].validate((valid) => {
        console.log(this.dataForm)
        if (valid) {
          this.saveLoading = true
          if (this.dialogType === 'add') {
            add(this.dataForm).then(() => {
              this.$message.success('成功')
              this.$emit('closeDialog')
              this.$emit('flushPage')
              this.clearData()
              this.saveLoading = false
            }).catch(() => {
              this.saveLoading = false
            })
          } else if (this.dialogType === 'update') {
            edit(this.dataForm).then(() => {
              this.$message.success('成功')
              this.$emit('closeDialog')
              this.$emit('flushPage')
              this.clearData()
              this.saveLoading = false
            }).catch(() => {
              this.saveLoading = false
            })
          }
        }
      })
    },
    tableAdd() {
      this.dataForm.codingProtocolList.push({ protocol: null,
        num: null })
    },
    tableDel(item) {
      // this.dataForm.codingProtocolList.
      var index = this.dataForm.codingProtocolList.indexOf(item)
      if (this.dataForm.codingProtocolList.length === 1) {
        this.$message({
          message: '至少关联一条协议',
          type: 'warning'
        })
        return
      }
      if (index !== -1) {
        this.dataForm.codingProtocolList.splice(index, 1)
      }
    },
    closeDialog() {
      this.$emit('closeDialog')
      this.clearData()
      this.$refs['form'].clearValidate()
    },
    clearData() {
      this.dataForm = {
        codingProtocolId: '',
        factorType: 'e012_01',
        num: '',
        name: '',
        digit: 14,
        measurementUnit: 119,
        measurementUnitRate: 12,
        countUnit: 119,
        countUnitRate: 12,
        lowerAlarmLimit: 100,
        upperAlarmLimit: 100,
        codingProtocolList: [{
          protocol: 'e049_01',
          num: null
        }]
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
